<template>
  <div ref="chart" style="width: auto ;height: 400px"></div>
</template>

<script>
import * as echarts from 'echarts'
import { getAction } from '@api/manage'

export default {
  name: 'TodayProduce',
  data() {
    return {
      description: '今日生产统计',
      chart: null,
      url: {
        productCountByDate: '/production/hfProductOrder/productCountByDate'
      },
      dataSource: [],
      materialNames: [],
      numbers: []
    }
  },
  created() {
    this.loadData()
  },
  methods: {
    loadData() {
      // getAction(this.url.productCountByDate).then((res)=>{
      //     this.dataSource = res;
      //     let d = this.dataSource
      //     for (let i in d){
      //       this.materialNames.push(d[i].materialName)
      //       this.numbers.push(d[i].totalNumber)
      //     }
      // }).then(()=>{
      //   this.initChart()
      // })
    },
    handleResize() {
      // 使用nextTick确保DOM已经更新完毕
      this.$nextTick(() => {
        if (this.chart) {
          // 调用resize方法
          this.chart.resize()
        }
      })
    },
    initChart() {
      this.chart = echarts.init(this.$refs.chart)
      this.chart.setOption({
        title: {
          text: '今日生产统计'
        },
        tooltip: {},
        legend: {},
        grid: {
          left: 'left',
          width: 'auto',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          name: '生产总数',
          nameLocation: 'center',
          nameGap: 25,
          nameTextStyle: {
            fontSize: 15,
            color: 'orange'
          }
        },
        yAxis: {
          data: this.materialNames
        },
        series: [
          {
            name: '产量',
            type: 'bar',
            data: this.numbers
          }
        ]
      })
      window.addEventListener('resize', this.handleResize)
    }
  },
  mounted() {
    this.handleResize()
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize)
    if (this.chart) {
      this.chart.dispose()
    }
  }
}
</script>

<style scoped></style>
